<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div style="margin: 20px">
    <form class="layui-form layui-form-pane">
        <input type="hidden" id="photoPath" name="photoPath" th:value="${m.photoPath}">
        <input type="hidden" id="id" name="id" th:value="${m.id}">
        <!---->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-upload-list" >
                    <img th:src="@{'/file/fc/showImg/'+${m.photoPath}}" class="layui-upload-img" id="photo"
                         style="border: 1px solid #01AAED;border-radius: 4px;width: 100px;height: 100px">
                    <p id="photoText"></p>
                </div>
                <a class="layui-btn " id="checkPhoto" style="width: 100px;">选择头像</a>
                <!---->
                <div style="width: 200px;margin: 5px">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                         lay-filter="photoProgress">
                        <div class="layui-progress-bar layui-bg-blue" lay-perent="20%"></div>
                    </div>
                </div>
                <!---->
            </div>
        </div>
        <!---->
        <div class="layui-form-item">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-block">
                <input class="layui-input" th:value="${m.userName}" name="userName" placeholder="输入用户名" autocomplete="off"/>
            </div>
        </div>
        <!---->
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
                <input class="layui-input" th:value="${m.loginName}" readonly  name="loginName" placeholder="输入登录名" autocomplete="off"/>
            </div>
        </div>
        <!---->
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="password" th:value="${m.password}" class="layui-input layui-disabled" name="password" placeholder="输入登录密码，不输入默认123456" autocomplete="off"/>
            </div>
        </div>
        <!---->
        <div class="layui-form-item">
            <label class="layui-form-label">用户等级</label>
            <div class="layui-input-inline">
                <select name="level">
                    <option value="" title="请选择"></option>
                    <option value="1">普通用户</option>
                    <option value="2">vip用户</option>
                    <option value="3">高级vip用户</option>
                </select>

            </div>
        </div>
        <!---->
        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-block">
                <a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">提交</a>
            </div>
        </div>
    </form>
</div>

<!---->
<script>
    var $;
    layui.use(['table','form','jquery','layer','upload','element'],function() {
        var table = layui.table, layer = layui.layer,
            form = layui.form,upload = layui.upload,element = layui.element;
        $ = layui.jquery;

        //头像上传
        var photoUpload = upload.render({
            elem:'#checkPhoto',
            url:'/file/fc/fileUpload',
            before:function (obj) {
                obj.preview(function (i,f,r) {
                    $('#photo').attr('src',r);

                });
                element.progress('photoProgress','0%');
            },
            done:function (res) {
                if (!res.is){
                    layer.msg('上传失败，请稍后再试......');
                }else {
                    $('#photoPath').val(res.file.id);
                }
            },
            error:function(){

            },
            progress:function (n,el,e) {
                element.progress('photoProgress',n+"%");
                if (n==100){
                    layer.msg('上传完成!',{icon:1});
                }
            }

        })

        form.on('submit(submitBtn)',function (data) {
            var formData = data.field;
            $.ajax({
                type:'post',
                url:'/system/uc/update',
                data:formData,
                dataType:'json',
                success:function (result) {
                    layer.msg(result.msg);
                    if (result.is){
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);  //编辑成功后关闭父页面窗口
                        parent.layui.table.reload('userTable');//根据表格id刷新父页面表格
                    }
                }
            })
        })

    });



    function btnSubmit() {
        $('#submitBtn').click();
    }
</script>

</body>
</html>